<!doctype html>
<html class="default no-js">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>nx-bghoard</title>
	<meta name="description" content="Documentation for nx-bghoard">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
	<div class="tsd-page-toolbar">
		<div class="container">
			<div class="table-wrap">
				<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
					<div class="field">
						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
						<input id="tsd-search-field" type="text" />
					</div>
					<ul class="results">
						<li class="state loading">Preparing search index...</li>
						<li class="state failure">The search index is not available</li>
					</ul>
					<a href="index.html" class="title">nx-bghoard</a>
				</div>
				<div class="table-cell" id="tsd-widgets">
					<div id="tsd-filter">
						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
						<div class="tsd-filter-group">
							<div class="tsd-select" id="tsd-filter-visibility">
								<span class="tsd-select-label">All</span>
								<ul class="tsd-select-list">
									<li data-value="public">Public</li>
									<li data-value="protected">Public/Protected</li>
									<li data-value="private" class="selected">All</li>
								</ul>
							</div>
							<input type="checkbox" id="tsd-filter-inherited" checked />
							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
							<input type="checkbox" id="tsd-filter-externals" checked />
							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
							<input type="checkbox" id="tsd-filter-only-exported" />
							<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
						</div>
					</div>
					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
				</div>
			</div>
		</div>
	</div>
	<div class="tsd-page-title">
		<div class="container">
			<ul class="tsd-breadcrumb">
				<li>
					<a href="globals.html">Globals</a>
				</li>
			</ul>
			<h1>nx-bghoard</h1>
		</div>
	</div>
</header>
<div class="container container-main">
	<div class="row">
		<div class="col-8 col-content">
			<div class="tsd-panel tsd-typography">
				<a href="#nxbghoard" id="nxbghoard" style="color: inherit; text-decoration: none;">
					<h1>NxBghoard</h1>
				</a>
				<p>Create the repo:</p>
				<pre><code><span class="hljs-string">npx </span><span class="hljs-built_in">create-nx-workspace</span> <span class="hljs-string">nx-bghoard
</span>
? <span class="hljs-string">What </span><span class="hljs-string">to </span><span class="hljs-string">create </span><span class="hljs-string">in </span><span class="hljs-string">the </span><span class="hljs-string">new </span><span class="hljs-string">workspace </span><span class="hljs-string">react-express </span>    [a <span class="hljs-string">workspace </span><span class="hljs-string">with </span>a <span class="hljs-string">full </span><span class="hljs-string">stack </span><span class="hljs-string">application </span>(<span class="hljs-string">React </span>+ <span class="hljs-string">Express)</span>]
? <span class="hljs-string">Application </span><span class="hljs-string">name </span>                   <span class="hljs-string">review
</span>? <span class="hljs-string">Default </span><span class="hljs-string">stylesheet </span><span class="hljs-string">format </span>          <span class="hljs-string">emotion </span>          [ <span class="hljs-string">https:</span>//<span class="hljs-string">emotion.</span><span class="hljs-string">sh]</span></code></pre>
				<a href="#create-a-shared-ui-tile-react-library" id="create-a-shared-ui-tile-react-library" style="color: inherit; text-decoration: none;">
					<h2>Create a shared ui-tile react library</h2>
				</a>
				<pre><code class="language-bash">nx g @nrwl/react:lib ui-tile --directory=review  <span class="hljs-comment"># create ui-tile lib under review folder</span>
nx g @nrwl/react:lib util-formatters --directory=review
nx g @nrwl/react:lib data-access-games --directory=review

nx g @nrwl/react:lib feature-list --directory=review
nx g @nrwl/react:lib feature-details --directory=review</code></pre>
				<a href="#create-angular-store-app" id="create-angular-store-app" style="color: inherit; text-decoration: none;">
					<h2>Create angular store app</h2>
				</a>
				<pre><code class="language-bash">nx g @nrwl/angular:app store --routing --style=scss</code></pre>
				<p>and then modify <code>workspace.json schematics @nrwl/angular:library</code> with <code>style: scss</code>.</p>
				<p>Last run <code>tools/create-store-libs.sh</code>.</p>
				<a href="#create-shared-library-that-both-react-and-angular-app-can-use-it" id="create-shared-library-that-both-react-and-angular-app-can-use-it" style="color: inherit; text-decoration: none;">
					<h2>Create shared library that both react and angular app can use it.</h2>
				</a>
				<pre><code class="language-bash">nx g @nrwl/workspace:lib shared/util-formatters

nx g @nrwl/workspace:lib shared/assets
<span class="hljs-comment"># Add below into workspace.json for both react and angular section</span>
<span class="hljs-comment"># {</span>
<span class="hljs-comment">#   "input": "libs/shared/assets/src/lib",</span>
<span class="hljs-comment">#   "glob": "*.png",</span>
<span class="hljs-comment">#   "output": "assets"</span>
<span class="hljs-comment"># }</span>
</code></pre>
				<a href="#create-ui-tile-webcomponent" id="create-ui-tile-webcomponent" style="color: inherit; text-decoration: none;">
					<h2>Create ui-tile webComponent</h2>
				</a>
				<pre><code class="language-bash">nx g @nrwl/workspace:lib shared/ui-tile</code></pre>
				<a href="#adding-capabilities-to-your-workspace" id="adding-capabilities-to-your-workspace" style="color: inherit; text-decoration: none;">
					<h2>Adding capabilities to your workspace</h2>
				</a>
				<p>Below are some plugins which you can add to your workspace:</p>
				<ul>
					<li><a href="https://reactjs.org">React</a><ul>
							<li><code>npm install --save-dev @nrwl/react</code></li>
						</ul>
					</li>
					<li>Web (no framework frontends)<ul>
							<li><code>npm install --save-dev @nrwl/web</code></li>
						</ul>
					</li>
					<li><a href="https://angular.io">Angular</a><ul>
							<li><code>npm install --save-dev @nrwl/angular</code></li>
						</ul>
					</li>
					<li><a href="https://nestjs.com">Nest</a><ul>
							<li><code>npm install --save-dev @nrwl/nest</code></li>
						</ul>
					</li>
					<li><a href="https://expressjs.com">Express</a><ul>
							<li><code>npm install --save-dev @nrwl/express</code></li>
						</ul>
					</li>
					<li><a href="https://nodejs.org">Node</a><ul>
							<li><code>npm install --save-dev @nrwl/node</code></li>
						</ul>
					</li>
				</ul>
				<a href="#generate-an-application" id="generate-an-application" style="color: inherit; text-decoration: none;">
					<h2>Generate an application</h2>
				</a>
				<p>Run <code>nx g @nrwl/react:app my-app</code> to generate an application.</p>
				<blockquote>
					<p>You can use any of the plugins above to generate applications as well.</p>
				</blockquote>
				<p>When using Nx, you can create multiple applications and libraries in the same workspace.</p>
				<a href="#generate-a-library" id="generate-a-library" style="color: inherit; text-decoration: none;">
					<h2>Generate a library</h2>
				</a>
				<p>Run <code>nx g @nrwl/react:lib my-lib</code> to generate a library.</p>
				<blockquote>
					<p>You can also use any of the plugins above to generate libraries as well.</p>
				</blockquote>
				<p>Libraries are sharable across libraries and applications. They can be imported from <code>@nx-bghoard/mylib</code>.</p>
				<a href="#publish-library" id="publish-library" style="color: inherit; text-decoration: none;">
					<h2>Publish library</h2>
				</a>
				<p>Sometimes you would like to create a library that you would like to use outside of your monorepo. This can be accomplished by using the <code>--publishable</code> flag for Angular or React libraries.</p>
				<p>We&#39;ll create a React library with the name react-publish and give it the --publishable flag.</p>
				<pre><code class="language-bash">nx g @nrwl/react:lib react-publish --publishable
nx g @nrwl/angular:lib angular-publish --publishable</code></pre>
				<p>The --publishable flag added a build task for this library, so we can run <code>nx build react-publish</code>. The library has been compiled to the dist folder, and you can see it&#39;s been published with Typescript typings and esm5, esm2015 and umd versions of the library. Now when we&#39;re ready to publish the library, we can cd to dist/libs/react-publish and then run <code>npm publish --access public</code>.</p>
				<a href="#development-server" id="development-server" style="color: inherit; text-decoration: none;">
					<h2>Development server</h2>
				</a>
				<p>Run <code>nx serve my-app</code> for a dev server. Navigate to <a href="http://localhost:4200/">http://localhost:4200/</a>. The app will automatically reload if you change any of the source files.</p>
				<a href="#code-scaffolding" id="code-scaffolding" style="color: inherit; text-decoration: none;">
					<h2>Code scaffolding</h2>
				</a>
				<p>Run <code>nx g @nrwl/react:component my-component --project=my-app</code> to generate a new component.</p>
				<a href="#build" id="build" style="color: inherit; text-decoration: none;">
					<h2>Build</h2>
				</a>
				<p>Run <code>nx build my-app</code> to build the project. The build artifacts will be stored in the <code>dist/</code> directory. Use the <code>--prod</code> flag for a production build.</p>
				<a href="#running-unit-tests" id="running-unit-tests" style="color: inherit; text-decoration: none;">
					<h2>Running unit tests</h2>
				</a>
				<p>Run <code>nx test my-app</code> to execute the unit tests via <a href="https://jestjs.io">Jest</a>.</p>
				<p>Run <code>nx affected:test</code> to execute the unit tests affected by a change.</p>
				<a href="#running-end-to-end-tests" id="running-end-to-end-tests" style="color: inherit; text-decoration: none;">
					<h2>Running end-to-end tests</h2>
				</a>
				<p>Run <code>ng e2e my-app</code> to execute the end-to-end tests via <a href="https://www.cypress.io">Cypress</a>.</p>
				<p>Run <code>nx affected:e2e</code> to execute the end-to-end tests affected by a change.</p>
				<a href="#understand-your-workspace" id="understand-your-workspace" style="color: inherit; text-decoration: none;">
					<h2>Understand your workspace</h2>
				</a>
				<p>Run <code>nx dep-graph</code> to see a diagram of the dependencies of your projects.</p>
				<a href="#schematics" id="schematics" style="color: inherit; text-decoration: none;">
					<h2>Schematics</h2>
				</a>
				<pre><code class="language-bash">nx generate workspace-schematic add-license
nx g workspace-schematic add-documentation

<span class="hljs-comment"># use: will use add-license schematic to create under store project</span>
nx workspace-schematic add-license --name store
nx workspace-schematic add-documentation --name store</code></pre>
				<pre><code class="language-bash"><span class="hljs-comment"># externalSchematic</span>
nx g workspace-schematic tagged-library

nx workspace-schematic tagged-library <span class="hljs-built_in">test</span>-library</code></pre>
				<a href="#further-help" id="further-help" style="color: inherit; text-decoration: none;">
					<h2>Further help</h2>
				</a>
				<p>Visit the <a href="https://nx.dev">Nx Documentation</a> to learn more.</p>
			</div>
		</div>
		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
			<nav class="tsd-navigation primary">
				<ul>
					<li class="globals  ">
						<a href="globals.html"><em>Globals</em></a>
					</li>
					<li class="label tsd-is-external">
						<span>Internals</span>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_apps_review_jest_config_.html">&quot;apps/review/jest.config&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_apps_review_src_app_app_.html">&quot;apps/review/src/app/app&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_apps_review_src_environments_environment_.html">&quot;apps/review/src/environments/environment&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_apps_review_src_environments_environment_prod_.html">&quot;apps/review/src/environments/environment.prod&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_apps_review_src_main_.html">&quot;apps/review/src/main&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_apps_review_src_polyfills_.html">&quot;apps/review/src/polyfills&quot;</a>
					</li>
					<li class="label tsd-is-external">
						<span>Externals</span>
					</li>
					<li class=" tsd-kind-module tsd-is-external">
						<a href="modules/_libs_api_interfaces_src_index_.html">&quot;libs/api-<wbr>interfaces/src/index&quot;</a>
					</li>
					<li class=" tsd-kind-module tsd-is-external">
						<a href="modules/_libs_api_interfaces_src_lib_api_interfaces_.html">&quot;libs/api-<wbr>interfaces/src/lib/api-<wbr>interfaces&quot;</a>
					</li>
					<li class=" tsd-kind-module tsd-is-external">
						<a href="modules/_libs_review_data_access_games_src_index_.html">&quot;libs/review/data-<wbr>access-<wbr>games/src/index&quot;</a>
					</li>
					<li class=" tsd-kind-module tsd-is-external">
						<a href="modules/_libs_review_data_access_games_src_lib_review_data_access_games_.html">&quot;libs/review/data-<wbr>access-<wbr>games/src/lib/review-<wbr>data-<wbr>access-<wbr>games&quot;</a>
					</li>
					<li class=" tsd-kind-module tsd-is-external">
						<a href="modules/_libs_review_feature_details_src_index_.html">&quot;libs/review/feature-<wbr>details/src/index&quot;</a>
					</li>
					<li class=" tsd-kind-module tsd-is-external">
						<a href="modules/_libs_review_feature_details_src_lib_review_feature_details_.html">&quot;libs/review/feature-<wbr>details/src/lib/review-<wbr>feature-<wbr>details&quot;</a>
					</li>
					<li class=" tsd-kind-module tsd-is-external">
						<a href="modules/_libs_review_feature_list_src_index_.html">&quot;libs/review/feature-<wbr>list/src/index&quot;</a>
					</li>
					<li class=" tsd-kind-module tsd-is-external">
						<a href="modules/_libs_review_feature_list_src_lib_review_feature_list_.html">&quot;libs/review/feature-<wbr>list/src/lib/review-<wbr>feature-<wbr>list&quot;</a>
					</li>
					<li class=" tsd-kind-module tsd-is-external">
						<a href="modules/_libs_shared_ui_tile_src_index_.html">&quot;libs/shared/ui-<wbr>tile/src/index&quot;</a>
					</li>
					<li class=" tsd-kind-module tsd-is-external">
						<a href="modules/_libs_shared_ui_tile_src_lib_shared_ui_tile_.html">&quot;libs/shared/ui-<wbr>tile/src/lib/shared-<wbr>ui-<wbr>tile&quot;</a>
					</li>
					<li class=" tsd-kind-module tsd-is-external">
						<a href="modules/_libs_shared_ui_tile_src_lib_tile_styles_.html">&quot;libs/shared/ui-<wbr>tile/src/lib/tile-<wbr>styles&quot;</a>
					</li>
					<li class=" tsd-kind-module tsd-is-external">
						<a href="modules/_libs_shared_util_formatters_src_index_.html">&quot;libs/shared/util-<wbr>formatters/src/index&quot;</a>
					</li>
					<li class=" tsd-kind-module tsd-is-external">
						<a href="modules/_libs_shared_util_formatters_src_lib_shared_util_formatters_.html">&quot;libs/shared/util-<wbr>formatters/src/lib/shared-<wbr>util-<wbr>formatters&quot;</a>
					</li>
				</ul>
			</nav>
			<nav class="tsd-navigation secondary menu-sticky">
				<ul class="before-current">
				</ul>
			</nav>
		</div>
	</div>
</div>
<footer class="with-border-bottom">
	<div class="container">
		<h2>Legend</h2>
		<div class="tsd-legend-group">
			<ul class="tsd-legend">
				<li class="tsd-kind-object-literal"><span class="tsd-kind-icon">Object literal</span></li>
				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
			</ul>
		</div>
	</div>
</footer>
<div class="container tsd-generator">
	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="assets/js/main.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="assets/js/search.js"><' + '/script>');</script>
</body>
</html>